import { useEffect, useMemo, useState } from "react";

// import style from "./index.module.less";
import { Modal, Result, Row, Space, Typography } from "antd";
import { CheckCard } from "@ant-design/pro-components";
import { useLazyCards } from "@/services/card";
import { useEditProductInfo, useProductInfo } from "@/services/product";
import CourseSearch from "@/components/CourseSearch";
import style from "./index.module.less";
import { CreditCardOutlined } from "@ant-design/icons";
import { getCardName } from "@/utils/contants";
import _ from "lodash";

interface IProps {
  onClose: () => void;
  id?: string;
}
/**
 * 消费卡
 */
const ConsumeCard = ({ onClose, id = "" }: IProps) => {
  const { data: cards, loading: getCardsLoading, getCards } = useLazyCards();
  const [selectedCards, setSelectedCards] = useState<string[]>([]);
  const { data: product, loading: getProductLoading } = useProductInfo(id);
  // const [del, delLoading] = useDeleteCard();
  const [edit, editLoading] = useEditProductInfo();
  console.log("useProductInfo", product);

  // 进行去重
  const newCards = useMemo(
    () => _.unionBy(product?.cards || [], cards, "id"),
    [cards, product?.cards]
  );

  useEffect(()=>{
    setSelectedCards(product?.cards?.map(item=>item.id)||[])
  },[product?.cards])

  const onOkHandler = () => {
    edit(id, { cards: selectedCards }, ()=>onClose() );
  };
  const onSelected = (courseId: string) => {
    getCards(courseId);
  };
  return (
    <Modal
      title={"绑定消费卡"}
      width="900"
      open
      onOk={onOkHandler}
      onCancel={() => onClose()}
    >
      <Row justify="end">
        <CourseSearch onSelected={onSelected} />
      </Row>
      <Row justify="center" className={style.content}>
        {newCards.length === 0 && (
          <Result status="warning" title="请搜索课程，并选择对应消费卡" />
        )}
        <CheckCard.Group
          multiple
          loading={getProductLoading || editLoading || getCardsLoading}
          onChange={(value) => {
            setSelectedCards(value as string[]);
          }}
          value={selectedCards}
        >
          {newCards.map((item) => (
            <CheckCard
              key={item.id}
              value={item.id}
              size="small"
              avatar={<CreditCardOutlined />}
              title={
                <>
                  {/* <Row>
                    <Space>
                      <Typography.Text ellipsis className={style.name}>
                        {item.course?.name}
                      </Typography.Text>
                      {getCardName(item.type || "")}
                    </Space>
                  </Row>
                  <Row>
                    <div>{item.name}</div>
                  </Row> */}
                  <Row>
                    <Space>
                      <Typography.Text ellipsis className={style["name-short"]}>
                        {item.course?.name}
                      </Typography.Text>
                      <Typography.Text ellipsis className={style["name-short"]}>
                        <div>{item.name}</div>
                      </Typography.Text>
                      {getCardName(item.type || "")}
                    </Space>
                  </Row>
                </>
              }
              description={
                <Space>
                  <span>次数：{item.time}</span>
                  <span>有效期：{item.validityDay}</span>
                </Space>
              }
            />
          ))}
        </CheckCard.Group>
      </Row>
    </Modal>
  );
};

export default ConsumeCard;
